<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">

</head>
<body>
   <h1>上师文章管理</h1>

   <!--添加表格表单-->
   <form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 5px 30px 0px 0px" enctype="multipart/form-data">
       <div class="layui-form-item">
           <label class="layui-form-label">文章名</label>
           <div class="layui-input-block">
               <input type="text" name="articleName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">上传文章图片</label>
           <div class="layui-input-block">
               <button type="button" class="layui-btn" id="upload1">
                   <i class="layui-icon">&#xe67c;</i>上传图片
               </button>
           </div>
       </div>

       <div class="layui-form-item layui-form-text">
           <label class="layui-form-label">内容</label>
           <div class="layui-input-block">
               <textarea name="articleContent" placeholder="请输入内容" class="layui-textarea"></textarea>
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">上师ID</label>
           <div class="layui-input-block">
               <input type="text" name="guruId" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">上传时间</label>
           <div class="layui-input-block">
               <input type="text" name="articleDate" id="test1"  class="layui-input" >
           </div>
       </div>



       <div class="layui-form-item">
           <div class="layui-input-block">
               <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
           </div>
       </div>
   </form>


   <!--修改表格表单  start ---------->
   `   <form class="layui-form" id="updateForm" lay-Filter="updateFormFilter" style="display: none;padding: 5px 20px 0px  0px">

       <div class="layui-form-item">
           <label class="layui-form-label">文章名</label>
           <div class="layui-input-block">
               <input type="hidden" name="articleId" >
               <input type="text" name="articleName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">上传文章图片</label>
           <div class="layui-input-block">
               <button type="button" class="layui-btn" id="upload2">
                   <i class="layui-icon">&#xe67c;</i>上传图片
               </button>
           </div>
       </div>

       <div class="layui-form-item layui-form-text">
           <label class="layui-form-label">内容</label>
           <div class="layui-input-block">
               <textarea name="articleContent" placeholder="请输入内容" class="layui-textarea"></textarea>
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">上师ID</label>
           <div class="layui-input-block">
               <input type="text" name="guruId" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
           </div>
       </div>

       <div class="layui-form-item">
           <label class="layui-form-label">上传时间</label>
           <div class="layui-input-block">
               <input type="text" name="articleDate" id="test2"  class="layui-input" >
           </div>
       </div>

       <div class="layui-form-item">
           <div class="layui-input-block">
               <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
           </div>
       </div>
   </form>

   <!----------修改表格表单  end  --------->


   <div>
       <button id="deleteAll" class="layui-btn">删除选中</button>
       <button id="add" class="layui-btn">添加</button>
   </div>

   <table  id="demo" lay-filter="tableFilter"></table>

   <script type="text/html" id="barDemo">
       <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
       <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
   </script>


   <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

   <script type="text/html" id="img">
       <img src="${pageContext.request.contextPath}{{d.guruImage}}" width="50px" hidden="50px" />
   </script>
   <script >
       layui.use(['table','form','laydate','upload','layer','jquery'], function(){
           var table = layui.table;
           var form = layui.form;
           var laydate = layui.laydate;
           var  layer=layui.layer;
           var  upload=layui.upload;
           var $ =layui.jquery;
           //日期组件
           laydate.render({
               elem:"#test1"
           })

           laydate.render({
               elem:"#test2"
           })
           //表格动态展示
           //第一个实例
           table.render({
               elem: '#demo'
               ,height: 312
               ,url: '${pageContext.request.contextPath}/article/selectAll' //数据接口
               ,page: true //开启分页
               ,limit:3
               ,limits:[3,6,9]
               ,cols: [[ //表头
                   {type:'checkbox', fixed: 'left'}
                   ,{field: 'articleId', title: '文章编号', width:100, sort: true}
                   ,{field: 'articleName', title: '上师文章名', width:230}
                   ,{field: 'articleImage', title: '上师文章图片', width:120,templet:"#img"}
                   ,{field: 'articleContent', title: '上师文章内容', width:300}
                   ,{field: 'guruId', title: '上师法号', width: 100}
                   ,{field: 'articleDate', title: '文章上传时间', width:180}
                   ,{title:'操作',toolbar:'#barDemo'}


               ]]
           });

           $("#add").click(function () {
               layer.open({
                   type:1
                   ,title:'添加页面'
                   ,content:$("#addForm")
               })
           })
           //-----添加功能  start------

           //文件上传 start-----
           upload.render({
               elem: '#upload1' //绑定元素
               // ,auto:false //auto:false,禁止自动上传,默认自动上传
               // ,bindAction:'#btn1'
               ,url: '${pageContext.request.contextPath}/article/upload' //上传接口
               ,done: function(res){
                   //上传完毕回调
                   form.val('addFormFilter',{
                       articleImage:res.newName
                   })
               }
               ,error: function(){
                   //请求异常回调
                   console.log("上传异常")
               }
           });
           //-----文件上传   end  -----


           //监听提交
           form.on('submit(formDemo)', function(data){
               layer.msg(JSON.stringify(data.field));
               $.ajax({
                   url:'${pageContext.request.contextPath}/article/insert'
                   ,data:$("#addForm").serialize()
                   ,success:function(result){
                       if(result.flag){
                           layer.closeAll();//关闭添加界面的弹出层
                           $("#addForm")[0].reset();//使用js中的reset方法清空表单中的数据
                           layer.msg("添加成功!!!!");
                           table.reload("demo")//重载表格
                       }else{
                           layer.msg("添加异常!!!!")
                       }
                   }
               })
               return false;
           });
           //------添加功能end-----

           //文件上传 start-----
           upload.render({
               elem: '#upload2' //绑定元素
               // ,auto:false //auto:false,禁止自动上传,默认自动上传
               // ,bindAction:'#btn1'
               ,url: '${pageContext.request.contextPath}/article/upload' //上传接口
               ,done: function(res){
                   //上传完毕回调
                   form.val('updateFormFilter',{
                       bannerImageUrl:res.newName
                   })
               }
               ,error: function(){
                   //请求异常回调
                   console.log("上传异常")
               }
           });
           //-----文件上传   end  -----

           //table事件监听器  控制监听  编辑和删除
           table.on('tool(tableFilter)',function (obj) {
               var data=obj.data;

               console.log(data)
               if (obj.event=='edit'){
                   layer.open({
                       type:1
                       ,title:'修改页面'
                       ,content:$("#updateForm")

                   })

                   $.ajax({
                       url:'${pageContext.request.contextPath}/article/selectOne'
                       ,data:'id='+obj.data.articleId
                       ,dataType:'json'
                       ,success:function (result) {

                           form.val('updateFormFilter',result)
                       }
                   })
               }else if(obj.event=='del'){
                   layer.confirm('确定要删除吗,亲!',function (index) {
                       $.ajax({
                           url:'${pageContext.request.contextPath}/article/delete'
                           ,data:'id='+obj.data.articleId
                           ,dataType:'json'
                           ,success:function (result) {
                               if(result.flag){
                                   layer.msg('删除成功');
                                   table.reload('demo');
                               }
                           }
                       })
                       layer.close(index);
                   })

               }
           });
           //---修改功能  start------
           form.on('submit(update)', function(data){
               layer.msg(JSON.stringify(data.field));
               $.ajax({
                   url:'${pageContext.request.contextPath}/article/update'
                   ,data:$("#updateForm").serialize()
                   ,dataType:'json'
                   ,success:function(result){
                       if(result.flag){

                           //隐藏修改弹出层
                           layer.closeAll();
                           //提示修改层
                           layer.msg("修改成功!!!!");
                           //表格重载
                           table.reload("demo")
                       }
                   }
               })
               return false;
           });
           //    ------修改功能结束--------

       });
   </script>

</body>
</html>
